<template>
  <div>
    <div class="comments-status">
      <van-button
        :class="tabIndex === index ? 'active' : ''"
        @click="tabClick(index)"
        v-for="(item, index) in statusArr"
        :key="item"
      >
        {{ item }}
      </van-button>
    </div>

    <van-field
      v-model="message"
      rows="5"
      autosize
      label="评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入点评"
      show-word-limit
    />
    <div class="comments-button">
      <van-button type="info" @click="onCancel">取消</van-button>
      <van-button type="info" @click="onConfirm">发表</van-button>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import { Dialog } from 'vant'
import { debounce } from 'lodash'
export default {
  data() {
    return {
      statusArr: ['推荐', '一般', '不行'],
      tabIndex: null,
      message: '',
      commentsItem: {},
    }
  },
  computed: {
    ...mapState(['userInfo', 'unpublishedArrr']),
  },
  created() {
    // 重新拿取赋值，让用户发布
    let unpublishedItem = this.unpublishedArrr.filter(
      (v) => v.idCard === this.$route.params.id
    )
    if (unpublishedItem.length) {
      this.message = unpublishedItem[0]?.value
      this.tabIndex = unpublishedItem[0]?.tabIndex
    }
  },
  methods: {
    ...mapMutations(['SET_COMMENTS_CONTENT', 'SET_UNPUBLISH_ARR']),
    // 状态切换
    tabClick(index) {
      this.tabIndex = index
    },
    // 点击提交
    onConfirm: debounce(function () {
      // 提交给vuex
      if (this.message) {
        this.commentsItem = {
          id: Date.now(),
          idCard: this.$route.params.id, // 这个字段，是为了区分是哪一本书的评论
          status: this.statusArr[this.tabIndex],
          value: this.message,
          like: false,
          userInfo: this.userInfo, // 用来标记这个是谁的评论
        }
        //
        this.SET_COMMENTS_CONTENT(this.commentsItem)

        this.message = ''
        this.tabIndex = null
        this.$toast.success('发表成功')
        this.SET_UNPUBLISH_ARR({})
        this.$router.push(`/detail/${this.$route.params.id}`)
      } else {
        this.$toast('请输入评论内容')
      }
    }, 500),
    // 取消的时候，跳出弹出框，让用户选择，是否缓存这个书架
    onCancel() {
      // 当用户取消发布的时候，让用户选择是否缓存当前的数据
      Dialog.confirm({
        title: '是否放弃修改',
        // message: '弹窗内容',
      })
        .then(() => {
          this.commentsItem = {
            id: Date.now(),
            // 这个字段，是为了区分是哪一本书的评论
            idCard: this.$route.params.id,
            status: this.statusArr[this.tabIndex],
            value: this.message,
            like: false,
            tabIndex: this.tabIndex,
            userInfo: this.userInfo, // 用来标记这个是谁的评论
          }
          console.log(this.commentsItem, 'commentsItem')
          this.SET_UNPUBLISH_ARR(this.commentsItem)
          this.$router.push(`/detail/${this.$route.params.id}`)
        })
        .catch(() => {
          console.log('不缓存')
          // on cancel
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.comments-status {
  display: flex;
  .van-button {
    margin: 5px;
    border-radius: 10px;
  }
  .active {
    border: 1px solid rgb(2, 2, 182);
    color: rgb(2, 2, 182);
  }
  // span {
  //   flex: 1;
  //   margin: 5px;
  //   border-radius: 10px;
  // }
}
.comments-button {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  .van-button {
    width: 60px;
    height: 35px;
  }
}
</style>
